<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我的活动</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <link rel="stylesheet" href="../css/basic.css">
  <style>
    .btn-wrap{
      margin:5px 20px;
    }
    .btn-wrap>button{
      float: right;
      margin: 0 10px;
    }  
  </style>
</head>
<body>
    <form action="" class="bs-center layui-form">
            <div class="layui-col-sm5 layui-form-item">
                <label class="layui-form-label">活动名：</label>
                <div class="layui-input-block">
                <input type="text" name="userName" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm5">
                <label class="layui-form-label">社团号：</label>
                <div class="layui-input-block">
                <input type="text" name="userAccount" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm2">
                <a id="searchIpt" class="layui-btn layui-btn-normal">搜索</a>
            </div>
        </form>
  <div class="layui-col-sm8 layui-col-sm-offset2">
    <table id="table" lay-filter="table"></table>
  </div>
</body>


<form id="addNumber" class="layui-form bs-hidden fm-in" lay-filter="addNumber">
  <div class="layui-form-item bs-hidden">
      <label class="layui-form-label"> 活动代号：</label>
      <div class="layui-input-block">
          <input type="text" name="a1" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动名称：</label>
      <div class="layui-input-block">
      <input type="text" name="a2" readonly  lay-verify="required" placeholder="触角动漫社明伦校区宅舞演出" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">举办社团：</label>
      <div class="layui-input-block">
      <input type="text" name="a2" readonly  lay-verify="required" placeholder="触角动漫社" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动地点：</label>
      <div class="layui-input-block">
          <input type="text" name="a4" readonly lay-verify="required" placeholder="明伦校区大礼堂" autocomplete="off" class="layui-input">
      </div>
  </div>
  <div class="layui-form-item">
      <label class="layui-form-label">开始时间：</label>
      <div class="layui-input-block">
        <input type="text" class="layui-input"  placeholder="2018-11-2" readonly id="Ctime" lay-filter="Ctime">
      </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">结束时间：</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input"   placeholder="2018-11-2" readonly id="Ctime" lay-filter="Ctime">
    </div>
</div>
  <div class="layui-form-item">
      <label class="layui-form-label">活动介绍：</label>
      <div class="layui-input-block">
        <textarea name="a7"  readonly placeholder="在众多的动漫爱好者当中，青年人占了绝大部分，特别是大学生，在河南大学校园内也有众多的动漫爱好者。本次动漫协会的“青葱岁月”主题活动的主要目的，一方面是为了向其它高校动漫协会和社会上的一些漫画创作组以及一些从事动漫活动创作活动的公司展示我们河大触角动漫协会的实力，同时也为本协会与社会上的一些公司合作进行联动打下基础；另一方面，也是为了让校内广大的动漫爱好者的作品和收藏提供交流的机会；更重要的是，“青葱岁月”这个主题正切合大学生心理特征，从而保证了本次活动的质量，能提高广大大学生动漫迷的漫画技巧和漫画欣赏能力，丰富广大大学生的精神文明生活。" class="layui-textarea"></textarea>
      </div>
  </div>
</form>

<!-- 表格里的操作按钮 -->
<script type="text/html" id="ipts">
  <a lay-event="retail" class="layui-btn layui-btn-xs">详情</a>
  <a lay-event="addAct" class="layui-btn layui-btn-xs">加入</a>
</script>


<script>
layui.use(['laydate','table', 'layer', 'jquery','form'], function () {
  var laydate = layui.laydate;
  var table = layui.table
  var layer = layui.layer
  var $ = layui.jquery
  var form = layui.form;
  var mydate = new Date()
  var dataNow = mydate.toLocaleDateString()

  var pageData = {
    "tableData": [{
        "id": 10001,
        "cName": "触角动漫社明伦校区宅舞演出",
        "cPar": "触角动漫社",
        "cWhere": "明伦校区大礼堂",
        "cTime":"2018-11-2",
        "eTime":"2018-11-2",
        "Desc":"在众多的动漫爱好者当中，青年人占了绝大部分，特别是大学生，在河南大学校园内也有众多的动漫爱好者。本次动漫协会的“青葱岁月”主题活动的主要目的，一方面是为了向其它高校动漫协会和社会上的一些漫画创作组以及一些从事动漫活动创作活动的公司展示我们河大触角动漫协会的实力，同时也为本协会与社会上的一些公司合作进行联动打下基础；另一方面，也是为了让校内广大的动漫爱好者的作品和收藏提供交流的机会；更重要的是，“青葱岁月”这个主题正切合大学生心理特征，从而保证了本次活动的质量，能提高广大大学生动漫迷的漫画技巧和漫画欣赏能力，丰富广大大学生的精神文明生活。",
      },
      {
          "id": 10002,
          "cName": "触角动漫社金明校区宅舞演出",
          "cPar": "触角动漫社",
          "cWhere": "金明校区图书馆前",
          "cTime":"2018-11-3",
          "eTime":"2018-11-3",
          "Desc":"在丰富学生暑期文化生活的同时成功的打造了业内各形象展示和信息交流的佳平台，依托河南大学的强大宣传优势“宅舞演出”吸引了学生、家庭群体的广泛关注。",
        },
        {
            "id": 10003,
            "cName": "触角动漫社动漫沙龙活动",
            "cPar": "触角动漫社",
            "cWhere": "明伦校区大礼堂",
            "cTime":"2018-11-25",
            "eTime":"2018-11-25",
            "Desc":"打造了业内各形象展示和信息交流的佳平台，有一个和名家面对面的机会。",
          },
      {
          "id": 10004,
          "cName": "软件社新校区电脑义诊",
          "cPar": "软件社",
          "cWhere": "金明校区下沉广场",
          "cTime":"2018-11-19",
          "eTime":"2018-11-20",
          "Desc":"随着科技的不断的发展，电脑这一络交通工具也不断的发展、普及，随着电脑的不断普及，相信广大老师、同学们的电脑也会时不时的出现一些例如系统错误、驱动错误等的等故障，电脑出现了故障，使得同学们在学习和生活上出现了许多不便，所以我们软件协会为了全校广大师生的电脑安全举办的电脑义诊活动。",
        },
        {
            "id": 10005,
            "cName": "双节棍表演",
            "cPar": "双节棍社",
            "cWhere": "明伦校区艺术馆",
            "cTime":"2018-11-30",
            "eTime":"2018-11-30",
            "Desc":"集合了志趣相投的人在一次游玩切磋；此外还可以参加校园内外的活动；同时我们也是双截棍协会会员，可与专业人士交流学习。本社团以丰富校园文化为目的，以自强不息，永不放弃为理念，以弘扬中华文化，传承侠之精神为宗旨。力求建立一个为追求梦想的完美和谐的非功利性组织",
         },
         {
             "id": 10006,
             "cName": "轮滑社刷街游会",
             "cPar": "轮滑社",
             "cWhere": "开封市东京大道",
             "cTime":"2018-11-21",
             "eTime":"2018-11-21",
             "Desc":"由东京大道新老校区刷街切磋；此外还可以参加校园内外的活动；同时我们也是双截棍协会会员，可与专业人士交流学习。本社团以丰富校园文化为目的，以自强不息，永不放弃为理念，以弘扬中华文化，传承侠之精神为宗旨。力求建立一个为追求梦想的完美和谐的非功利性组织",
          },
          {
              "id": 10007,
              "cName": "篮球社老校区院级篮球赛",
              "cPar": "篮球社",
              "cWhere": "明伦校区体育馆",
              "cTime":"2018-11-30",
              "eTime":"2018-11-30",
              "Desc":"篮球社开展第一节全校各院篮球比赛，此外还可以参加校园内外的活动；同时我们也是双截棍协会会员，可与专业人士交流学习。本社团以丰富校园文化为目的，以自强不息，永不放弃为理念，以弘扬中华文化，传承侠之精神为宗旨。力求建立一个为追求梦想的完美和谐的非功利性组织",
           },
           {
               "id": 10008,
               "cName": "国际协会新科技辩论赛",
               "cPar": "国际协会",
               "cWhere": "金明校区综合楼1201",
               "cTime":"2018-11-1",
               "eTime":"2018-11-1",
               "Desc":"本次辩论赛以科技发展的优劣为题目，开展一场辩论赛，集合了志趣相投的人在一次游玩切磋；此外还可以参加校园内外的活动；同时我们也是双截棍协会会员，可与专业人士交流学习。本社团以丰富校园文化为目的，以自强不息，永不放弃为理念，以弘扬中华文化，传承侠之精神为宗旨。力求建立一个为追求梦想的完美和谐的非功利性组织",
            },
    ]
  }

  //第一个实例
  table.render({
    id: 'tableImp',
    elem: '#table',
    page: true,//开启分页
    cols: [
        [ //表头
          {
            field: 'id',
            title: '活动号',
            width: '10%',
            sort: true,
            fixed: 'left',
            align: 'center'
          }, {
            field: 'cName',
            title: '活动名称',
            width: '10%',
            align: 'center'
          }, {
            field: 'cPar',
            title: '举办社团',
            width: '13%',
            align: 'center',
            sort: true
          }, {
            field: 'cWhere',
            title: '活动地点',
            width: '13%',
            align: 'center'
          },  {
            field: 'cTime',
            title: '开始时间',
            width: '13%',
            align: 'center'
          },{
            field: 'eTime',
            title: '截止时间',
            width: '13%',
            align: 'center'
          },{
            field: 'Desc',
            title: '活动介绍',
            width: '15%',
            align: 'center'
          },{
            fixed: 'right',
            title: '操作',
            align: 'center',
            width: '13%',
            toolbar: '#ipts'
          }
        ]
      ]
      //加载数据

      ,
    data: pageData.tableData
  })

  table.on('tool(table)',function (obj) {  
    var event = obj.event
    if(event === 'retail') {
      layer.open({
        type: 1,
        closeBtn: 1,
        title: '活动信息详情',
        content: $('#addNumber'),
        area: ['800px', '600px'],
      })
    }
    //删除
    else if(event === 'addAct') {
        layer.open({
          type:1,
          closeBtn: 0,
          title:"提示信息",
          content:"<span style='font-size:20px; margin-left:40px'>"+"真的加入么？"+"</span>",
          area:['200px','150px'],
          btn:['确定','取消'],
          btnAlign:'c',
          yes:function(index, layero){
            layer.msg('加入成功！');
            layer.close(index);
          },
          btn2:function(index, layero){
              layer.close(index);
              return false;
          }
        })
    }
  })

//执行一个laydate实例
laydate.render({
  elem: '#Ctime' //指定元素
});

})
</script>
</html>

